<template>
    <div class="customer_base_content">
        <div v-if="update" class="text">数据每小时更新一次，上次更新时间{{ update.substr(11) }}</div>
        <StatisticsSearch :options="statisOptions" @submit="onSubmit" />
        <BasicData :basic-data="basicData"></BasicData>
        <Chart :completion-data="completionData" :delivery-data="deliveryData"></Chart>
    </div>
</template>
<script lang="ts" setup>
import BasicData from './components/BasicData.vue';
import Chart from './components/Chart.vue';
import { ref, reactive, nextTick, onMounted } from 'vue';
import { getTime } from '@/api/board';
import { groupCustomer, groupTask, channelMsg, titleSearch } from '@/api/channel/operation';
import StatisticsSearch from '@/components/zw/statistics-search/StatisticsSearch.vue';

import { getDay } from '@/utils/utils';
const basicData = ref({});
const completionData = ref([]);
const deliveryData = ref([]);
const update = ref();
const params = reactive({
    filter_time: [],
    send_msg_id: ''
});
const statisOptions = reactive([
    {
        label: '群发时间筛选',
        type: 'dateFilter'
    },
    {
        label: '群发搜索',
        type: 'select',
        key: 'derpartLabel',
        remote: true,
        filterable: true,
        remoteMethod(query: string) {
            return new Promise((resolve, reject) => {
                const params = {
                    title: query,
                    type: 2
                };
                titleSearch(params)
                    .then((data: any) => {
                        data.forEach((item: any) => {
                            (item.label = item.title), (item.value = item.id);
                        });
                        resolve(data);
                    })
                    .catch(() => {
                        reject();
                    });
            });
        },
        optionList: [],
        value: '',
        placeholder: '请输入群发标题进行搜索'
    }
]);
const onSubmit = (data: any) => {
    params.filter_time = data.times || [];
    params.send_msg_id = data.derpartLabel;
    nextTick(() => {
        if (data.times) {
            getData();
            getCompletiontData();
            getDeliveryData();
        }
    });
};
//获取基础数据
const getData = () => {
    groupCustomer(params).then((data: any) => {
        basicData.value = data;
    });
};
//获取客户群群发任务完成率
const getCompletiontData = () => {
    const newData: any = [];
    groupTask(params).then((data: any) => {
        data.forEach((item: any) => {
            newData.push({
                value: item.task_num,
                name: item.title
            });
        });
        completionData.value = newData;
    });
};

//获取客户群群发消息送达率
const getDeliveryData = () => {
    const newData: any = [];
    const dataParams = {
        filter_time: params.filter_time,
        send_msg_id: params.send_msg_id,
        type: 2
    };
    channelMsg(dataParams).then((data: any) => {
        data.forEach((item: any) => {
            newData.push({
                value: item.msg_num,
                name: item.title
            });
        });
        deliveryData.value = newData;
    });
};
//提交查询
const submit = (data: any) => {
    params.send_msg_id = data.id;
    if (!data.createTime) {
        changeDate(data.currentId);
    } else {
        params.filter_time = data.createTime.join('~');
        changeDate('0');
    }
};
const changeDate = (data: any) => {
    switch (data) {
        case '1':
            params.filter_time = getDay(-1) + '~' + getDay(-1, true);
            break;
        case '2':
            params.filter_time = getDay(-6) + '~' + getDay(0, true);
            break;
        case '3':
            params.filter_time = getDay(-29) + '~' + getDay(0, true);
            break;
    }
    getData();
    getCompletiontData();
    getDeliveryData();
};
onMounted(() => {
    getTime({
        census_module: 4
    }).then((res: any) => {
        update.value = res?.date_updated_at;
    });
});
</script>
<style lang="scss" scoped>
.customer_base_content {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 142px);
}

.text {
    font-size: 14px;
    color: #848484;
    line-height: 14px;
    text-align: right;
    padding-top: 3px;
}
</style>
